<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <link rel="stylesheet" href="css/onepage.css">
    <link rel="stylesheet" href="css/twopage.css">
    <link rel="stylesheet" href="css/threepage.css">
    <link rel="stylesheet" href="css/fourpage.css">
    <link rel="stylesheet" href="css/fivepage.css">
    <link rel="stylesheet" href="css/sixpage.css">

</head>
<body>
    <div id="onepage">
       
      <div class="welcome">
         <img class="web" src="images/33.PNG" alt="">
         <img class="yaya" src="images/44.PNG" alt="">
      </div>
      <div class='ribbon'>
        <a href='#onepage'><span>Home</span></a>
        <a href='#twopage'><span>About</span></a>
        <a href='#threepage'><span>HOBBY</span></a>
        <a href='#fourpage'><span>SKILLS</span></a>
        <a href='#fivepage'><span>WORK</span></a>
        <a href='#sixpage'><span>CONTACT</span></a>
      </div>

      <div class="bottom">
        <img class="jiantou" src="images/jiantou.png" alt=""> 
        <input type="button" onClick="window.location.href='#twopage'">
      </div>
    </div>

   
    <div id="twopage">
        <div class="top">
            <div class="line"> </div>
            <span>ABOUT ME</span>
        </div>
        <div class="two-touxiang">
           <img id="two-img" src="images/05.jpg" alt="">
            <script>
                 var rotateVal = 0 // 旋转角度
            var InterVal // 定时器
            window.onload = function () {
                // 网页加载完成后即运行rotate函数
                rotate()
                // 鼠标悬浮在图片上时，停止旋转，即清除定时器
                document.getElementById('two-img').onmousemove = function () {
                    clearInterval(InterVal)
                }
                // 鼠标离开图片时，继续旋转，即继续运行定时器
                document.getElementById('two-img').onmouseleave = function () {
                    rotate()
                }
            }
            
            // 设置定时器
            function rotate () {
                InterVal = setInterval(function () {
                    var img = document.getElementById('two-img')
                    rotateVal += 1
                    // 设置旋转属性(顺时针)
                    img.style.transform = 'rotate(' + rotateVal + 'deg)'
                    // 设置旋转属性(逆时针)
                    //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                    // 设置旋转时的动画  匀速0.1s
                    img.style.transition = '0.1s linear'
                }, 80)
            }
            </script>
        </div>
        <div class="intro">
            <table>
                <tr>
                    <td>姓名：方泽君</td>
                    <td>学校：淮北师范大学</td>
                </tr>
                <tr>
                    <td>性别：女</td>
                    <td>专业：计算机科学与技术</td>
                </tr>
                <tr>
                    <td>籍贯：汉族</td>
                    <td>学历：本科</td>
                </tr>
                <tr>
                    <td>年龄：22岁</td>
                    <td>居住地：安徽安庆</td>
                </tr>
                <tr>
                    <td>性格：乐观</td>
                    <td>目标：Web工程师</td>
                </tr>
            </table>
        </div>
        <div class="zuoyouming">             
            <span>座右铭：天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。</span>     
            <img class="daima" src="images/timg.gif" alt="">    
        </div>
        <div class="bottom">
            <img class="jiantou" src="images/jiantou.png" alt=""> 
            <input type="button" onClick="window.location.href='#threepage'">
          </div>
    </div>


    <div id="threepage">
        <div class="three-top">
            <div class="three-line"> </div>
            <span>HOBBY</span>
        </div> 
        <div class="swiper">
            <div class="swiper-content">
                <div >
                    <div>
                        <img src="images/juediqiusheng.jpg" alt="">
                       </div>
                    <span class="all-intere">
                        <ul>
                            <li>
                                <strong>01</strong>
                                愉悦身心
                                <p>玩游戏尤其是玩自己喜欢的游戏，可以让自己高兴起来，清扫心里的不开心，还减轻烦恼。</p>
                            </li>
                            <li><strong>02</strong>
                                降压
                                <p>生活、工作压力大，玩游戏可以让自己稍微放松一下，解解压，这样才能更好的生活和工作。</p>
                            </li>
                            <li><strong>03</strong>
                                增进友谊
                                <p>不管朋友与你在不在一个城市，你都可以跟朋友开黑玩游戏，这样便加强了与朋友的联系和交流，能增进你们的友谊。
                                </p>
                            </li>
                        </ul>
                    </span>
                </div>
               <div> 
                   <div>
                    <img src="images/zhangjie1.jpg" alt="">
                   </div>
                   <span class="all-intere">
                    <ul>
                        <li>
                            <strong>01</strong>
                            主要成就
                            <p>2014年全美音乐奖年度国际艺人奖。</p>
                        </li>
                        <li><strong>02</strong>
                            代表作品
                            <p>《逆战》 《这就是爱》 《勿忘心安》  《明天过后》</p>
                        </li>
                        <li><strong>03</strong>
                            毕业院校
                            <p>四川师范大学
                            </p>
                        </li>
                        <li><strong>04</strong>
                            星座
                            <p>射手座
                            </p>
                        </li>
                    </ul>
                </span>
                </div>
               
                <div>
                    <div>
                        <img src="images/yuedu.jpg" alt="">
                    </div>
                    <span class="all-intere">
                        <ul>
                            <li>
                                <strong>01</strong>    
                                开拓视野                      
                                <p>读书能够开阔我们的视野，秀才不出门，尽知天下事。</p>
                            </li>
                            <li><strong>02</strong>
                                培养气质
                                <p>读得万卷书，孩子所接触的层面就会比较广，在与人交谈时也不会畏手畏脚，胸无点墨。
                                </p>
                            </li>
                            <li><strong>03</strong>
                                提升理解力
                                <p>喜欢读书，养成读书习惯，可以培养听力、理解力，成为“听话高手”。
                                </p>
                            </li>
                        </ul>
                    </span>
                </div>
                <div>
                    <div>
                        <img src="images/luxing.jpg" alt="">
                    </div>
                    <span class="all-intere">
                        <ul>
                            <li>
                                <strong>01</strong>    
                                走向自然，陶冶情操                    
                                <p>与大自然亲密接触，外面的世界多精彩</p>
                            </li>
                            <li><strong>02</strong>
                                欣赏风光，增长见识
                                <p>旅游是个综合性的活动，它具有很大的学问。简单地说，旅游包含着天时、地利、自然、考古、建筑、园林、动植物学、方言、风土人情、饮食文化、地方土特产等
                                </p>
                            </li>
                            <li><strong>03</strong>
                                见多识广
                                <p>旅游是个“流动的大课堂”，我们在旅游中能看到各种稀奇古怪的东西。
                                </p>
                            </li>
                        </ul>
                    </span>
                </div>
            
            </div>
            <div id="btns">
                <span class="current">游戏</span>
                <span>明星</span>
                <span>读书</span>
                <span>旅游</span>

            </div>
        </div>
        <div class="bottom">
            <img class="jiantou" src="images/jiantou.png" alt=""> 
            <input type="button" onClick="window.location.href='#fourpage'">
          </div>
        <script>
            // 封装:就是一段重复的代码写成函数
            let index = 0;
          
            // 点击焦点让对应的下标值的图片显示,重置下标值
            $("#btns span").click(function(){
                index = $(this).index();
                // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
                // $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
                animate(1000)
            })
            function animate(speed) {
                $(".swiper-content>div").eq(index).fadeIn(speed).siblings().fadeOut(speed)
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
            }
        </script>
    </div>

    <div id="fourpage">
        <div class="four-top">
            <div class="four-line"> </div>
            <span>GOALS</span>
        </div>
        <div class="case">
            <span>梦想成真</span><br>
            <span>生活顺利</span>
            <img class="girl" src="images/女孩.jpg" alt="">
        </div> 
        <div class="box">
			<div><span></span></div>
			<div><span>通过教资面试</span></div>
			<div><span>顺利完成实习</span></div>
			<div><span>找到适合的工作</span></div>
			<div><span>提高编程能力</span></div>
			<div><span>过上平淡的生活</span></div>
			<div><span>挣大钱</span></div>
			<div><span>挣大钱</span></div>
			<div><span>过上平淡的生活</span></div>
			<div><span>提高编程能力</span></div>
			<div><span>找到适合的工作</span></div>
			<div><span>顺利完成实习</span></div>
			<div><span>通过教资面试</span></div>
			<div><span>通过英语六级</span></div>
		</div>
        <div class="bottom">
            <img class="jiantou" src="images/jiantou.png" alt=""> 
            <input type="button" onClick="window.location.href='#fivepage'">
        </div>
    </div>

               
    <div id="fivepage">
        <div class="five-top">
            <div class="five-line"> </div>
            <span>WORK</span>
        </div> 
       <div class="zuopin-one">
        <div>
            <a href="https://zejunfang.gitee.io/homework/"><img class="zuopin1" src="images/zuopin1.PNG" alt=""></a>
        </div>
        <div>
            <a href="https://zejunfang.gitee.io/homework2/"><img class="zuopin2" src="images/zuopin2.PNG" alt=""></a>
        </div>
        <div>
            <a href="https://zejunfang.gitee.io/homework1/"><img class="zuopin3" src="images/zuopin3.PNG" alt=""></a>
        </div>
        <div>
            <a href="https://zejunfang.gitee.io/day2-homework2/"><img class="zuopin4" src="images/zuopin4.PNG" alt=""></a>
        </div>
       </div>
       <div class="zuopin-two">
        <div>
            <a href="https://zejunfang.gitee.io/sjiajuyisheng"><img class="zuopin1" src="images/zuopin5.PNG" alt=""></a>
         </div>
         <div>
             <a href=" https://zejunfang.gitee.io/xiaomidongtai"><img class="zuopin2" src="images/zuopin6.PNG" alt=""></a>
         </div>
         <div>
             <a href=" https://zejunfang.gitee.io/xiaomijingtai"><img class="zuopin3" src="images/zuopin7.PNG" alt=""></a>
         </div>
         <div>
             <a href=" https://zejunfang.gitee.io/hongbei"><img class="zuopin4" src="images/zuopin8.PNG" alt=""></a>
         </div>
       </div>
        <div class="bottom">
            <img class="jiantou" src="images/jiantou.png" alt=""> 
            <input type="button" onClick="window.location.href='#sixpage'">
        </div>
    </div>

    <div id="sixpage">
        <div class="six-top">
            <div class="six-line"></div>
            <span>CONTACT</span>
        </div> 
        <form class="form" action="#">
            <input class="form1" type="text" placeholder="Name">
            <input class="form2" type="text" placeholder="Email">
            <input class="form3" type="text" placeholder="Suggest">
            <input class="form5" type="text" placeholder="Subject">
            <input class="form4" type="text" placeholder="Message">
            <button class="tijiao">Contact me</button>
        </form>
        <div class="drop-one">
            <img class="qq" src="images/QQ.png" alt="">
            <div class="erweima"><img src="images/qq.jpg" alt=""></div>
        </div>
        <div class="drop-two">
            <img class="weixin" src="images/weixin.png" alt="">
            <div class="erweima"><img src="images/wechat.jpg" alt=""></div>
        </div>
        <div class="drop-three">
            <img class="weibo" src="images/weibo.png" alt="">
            <div class="erweima"><img src="images/qq.jpg" alt=""></div>
        </div>
        <div class="lianxi">
            <img class="lianxi-one" src="images/lianxi.jpg" alt="">
        </div>
        <div class="bottom">
            <img class="jiantou" src="images/jiantoushang.png" alt=""> 
            <input type="button" onClick="window.location.href='#onepage'">
        </div>
    </div>
    <script>
         var index=0;
     /*当鼠标放到顺序按钮上时：
     1.将当前这个顺序按钮增加样式为红色背景
     2.移除周围其他同级元素红色背景样式
     3.获取当前顺序按钮的index
     4.通过index获取该位置图片
     5.一秒钟渐入该图片
     6.一秒钟渐出其他相邻图片
     7.防止移动过快导致的效果闪现，使用stop方法
     */
    $(".num li").mousemove(function () {
            $(this).addClass("current").siblings().removeClass("current");
            index=$(this).index();
            $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    });
    </script>
</body>
</html>